<template><div><h2 id="规格筛选器" tabindex="-1"><a class="header-anchor" href="#规格筛选器"><span>规格筛选器</span></a></h2>
<p>Dcat Admin 中文文档 /</p>
<h2 id="表格规格筛选器" tabindex="-1"><a class="header-anchor" href="#表格规格筛选器"><span>表格规格筛选器</span></a></h2>
<p>这个功能用来构建类似淘宝或京东商品的规格选择。</p>
<p><img src="@source/dcat-admin-2x/assets/images/bbb143fb-bd93-45bc-8314-c75e201c521b-6JTuX8z35m.png" alt=""></p>
<h3 id="基本使用" tabindex="-1"><a class="header-anchor" href="#基本使用"><span>基本使用</span></a></h3>
<blockquote>
<p><code v-pre>select</code>和<code v-pre>selectOne</code>方法的第二个参数为选择器<code v-pre>label</code>, 可以省略，如果省略的话将会自动使用翻译文件的翻译.</p>
</blockquote>
<p>如下代码所示，假设<code v-pre>brand</code>字段的4个取值分别对应4个品牌，下面的方式会构建出<code v-pre>brand</code>的规格选择器</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">selector</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Tools<span class="token punctuation">\</span>Selector</span> <span class="token variable">$selector</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$selector</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'brand'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'品牌'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'华为'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'小米'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'OPPO'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'vivo'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><code v-pre>select</code>方法默认是多选的，在页面上点击每一个选项的右边的加号，这个字段的查询会增加一个查询选项，如果字段筛选只允许选择一项，使用<code v-pre>selectOne</code>方法</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$selector</span><span class="token operator">-></span><span class="token function">selectOne</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'brand'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'品牌'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'华为'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'小米'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'OPPO'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'vivo'</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="关联关系字段查询" tabindex="-1"><a class="header-anchor" href="#关联关系字段查询"><span>关联关系字段查询</span></a></h3>
<p>如果安装了 <a href="https://github.com/jqhph/laravel-wherehasin" target="_blank" rel="noopener noreferrer">dcat/laravel-wherehasin</a>，则会优先使用<code v-pre>whereHasIn</code>方法进行查询操作</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token keyword">use</span> <span class="token package">Dcat<span class="token punctuation">\</span>Admin<span class="token punctuation">\</span>Grid</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line"><span class="token variable">$grid</span><span class="token operator">-></span><span class="token function">selector</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token class-name class-name-fully-qualified type-declaration">Grid<span class="token punctuation">\</span>Tools<span class="token punctuation">\</span>Selector</span> <span class="token variable">$selector</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$selector</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'brand.id'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'品牌'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token number">1</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'华为'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">2</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'小米'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">3</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'OPPO'</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token number">4</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'vivo'</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="自定义查询" tabindex="-1"><a class="header-anchor" href="#自定义查询"><span>自定义查询</span></a></h3>
<p>上面的方式会使用在选择器上选定的值，作为查询条件进行查询，但是有些情况需要更灵活的控制查询方式，那么可以使用下面的方式自定义查询：</p>
<div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre v-pre class="language-php"><code><span class="line"><span class="token variable">$selector</span><span class="token operator">-></span><span class="token function">select</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'price'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'价格'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'0-999'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'1000-1999'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'2000-2999'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token variable">$query</span><span class="token punctuation">,</span> <span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token variable">$between</span> <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">999</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token number">1000</span><span class="token punctuation">,</span> <span class="token number">1999</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">        <span class="token punctuation">[</span><span class="token number">2000</span><span class="token punctuation">,</span> <span class="token number">2999</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">]</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$value</span> <span class="token operator">=</span> <span class="token function">current</span><span class="token punctuation">(</span><span class="token variable">$value</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span>
<span class="line">    <span class="token variable">$query</span><span class="token operator">-></span><span class="token function">whereBetween</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'price'</span><span class="token punctuation">,</span> <span class="token variable">$between</span><span class="token punctuation">[</span><span class="token variable">$value</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line"></span></code></pre>
<div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>如上所示，传入一个匿名函数作为第四个参数，价格字段price选择之后，将会使用匿名函数中的逻辑进行数据查询，这样你可以定义任意的查询方式。</p>
</div></template>


